<template>
  <div class="query-page-bg">
    <el-card class="query-card" shadow="hover">
      <div class="query-header">
        <span class="query-title">文件信息查询</span>
        <el-form :inline="true" class="query-form">
          <el-form-item label="文件类型">
            <el-select v-model="selectedType" placeholder="请选择文件类型" style="width: 220px">
              <el-option
                v-for="type in fileTypes"
                :key="type"
                :label="type"
                :value="type"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="filteredData" class="query-table" stripe border :header-cell-style="headerStyle">
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="file_type" label="文件类型" width="120" align="center" />
        <el-table-column prop="batch" label="批次" width="120" align="center" />
        <el-table-column prop="file_path" label="文件路径" min-width="180" />
        <el-table-column prop="time" label="时间" width="180" align="center" />
        <el-table-column prop="file_name" label="文件名" min-width="120" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'

const testData = [
  {id: 1, file_type: '类型A', batch: '202401', file_path: '/path/a.xlsx', time: '2024-06-01 10:00:00', file_name: 'a.xlsx'},
  {id: 2, file_type: '类型B', batch: '202402', file_path: '/path/b.xlsx', time: '2024-06-02 11:00:00', file_name: 'b.xlsx'},
  {id: 3, file_type: '类型A', batch: '202403', file_path: '/path/c.xlsx', time: '2024-06-03 12:00:00', file_name: 'c.xlsx'},
  {id: 4, file_type: '类型C', batch: '202404', file_path: '/path/d.xlsx', time: '2024-06-04 13:00:00', file_name: 'd.xlsx'},
  {id: 5, file_type: '类型B', batch: '202405', file_path: '/path/e.xlsx', time: '2024-06-05 14:00:00', file_name: 'e.xlsx'},
]

const fileTypes = Array.from(new Set(testData.map(item => item.file_type)))
const selectedType = ref('')

const filteredData = computed(() => {
  if (!selectedType.value) return testData
  return testData.filter(item => item.file_type === selectedType.value)
})

const headerStyle = {
  background: 'linear-gradient(90deg, #4f8cff 0%, #67e8f9 100%)',
  color: '#fff',
  fontWeight: 'bold',
  fontSize: '16px',
  letterSpacing: '1px',
}
</script>

<style scoped>
.query-page-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f4ff 0%, #e0f7fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.query-card {
  width: 900px;
  border-radius: 18px;
  box-shadow: 0 6px 32px 0 rgba(79,140,255,0.10), 0 1.5px 6px 0 rgba(79,140,255,0.08);
  background: #fff;
  padding: 32px 36px 28px 36px;
}
.query-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}
.query-title {
  font-size: 26px;
  font-weight: 700;
  color: #2d3a4b;
  letter-spacing: 1px;
}
.query-form {
  margin-left: 24px;
}
.query-table {
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
}
</style> 